<template>
	<view class="relative">
		<view class="ball"
			:style=" balls.inited ? 'transition: transform .5s ease-in; transform: translate3d(0, ' + offsetY + 'px,0); top: ' + ballY + 'px;' : '' ">
			<!-- <view class="inner"
				:style="balls.inited ? 'transition: transform .5s linear; transform: translate3d( ' + offsetX + 'px,0,0); left: ' + ballX + 'px; opacity: 1;' : '' ">
			</view> -->
			<view class="item"
				:style="balls.inited ? 'transition: transform .5s linear; transform: translate3d( ' + offsetX + 'px,0,0); left: ' + ballX + 'px; opacity: 1;' : '' ">
				<image class="item-icon" :src="defaultItem.ioc"></image>
				<view class="item-text">{{defaultItem.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cartBasketRect: Object, // 购物车篮的rect信息
		},
		data() {
			return {
				offsetX: 0,
				offsetY: 0,
				ballX: 0,
				ballY: 0,
				balls: {
					inited: false
				},
				//避免抖动
				lastEvent: '',
				lastId: '',
				defaultItem: {
					ioc: '',
					defaultItem: ''
				}
			}
		},
		created() {

		},
		methods: {
			getBalls() {
				return balls;
			},
			addToCart(e, item, isPrint, type) {
				console.log(item)
				this.defaultItem = item
				const self = this

				let ballX = e.touches[0].clientX - 10
				let ballY = e.touches[0].clientY - 9;
				let relativePosition = e.touches[0].clientX > this.cartBasketRect.left ? -1 : 1;
				this.offsetX = relativePosition * Math.abs(this.cartBasketRect.left - ballX + 10)
				this.offsetY = Math.abs(this.cartBasketRect.top - ballY + (this.cartBasketRect.height / 1.5))
				this.ballX = ballX
				this.ballY = ballY
				if (type === 'del' && isPrint) {
					this.offsetY = this.offsetY - 88
				}
				// console.log('ballX', ballX, 'ballY', ballY, 'offsetX', this.offsetX, 'offsetY', this.offsetY)

				this.balls.inited = true
				setTimeout(() => {
					this.balls.inited = false
				}, 500);
			}
		}


	}
</script>


<style scoped lang="scss">
	.ball {
		position: fixed;
		z-index: 8;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;

			.item-icon {
				width: 96rpx;
				height: 96rpx;
			}

			.item-text {
				font-size: 13px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 0px;
				color: #000000;
				margin-top: 40rpx;
			}
		}

	}
</style>
